<template>
  <div class="live-create-room">
    <MainHeader title="创建直播间" :showSearch="false" />
    <el-card class="box-card">
      <el-steps
        :active="step"
        finish-status="success"
        space="150px"
        :align-center="true"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="直播间配置"></el-step>
      </el-steps>
      <el-form
        v-if="step == 1"
        ref="formEle"
        :model="basicInfo"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <el-form-item prop="name" label="直播间标题">
          <el-input
            v-model="basicInfo.name"
            placeholder="填写本次直播的标题"
            maxlength="17"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="time" label="开播时间">
          <el-date-picker
            v-model="basicInfo.time"
            value-format="timestamp"
            type="datetimerange"
            range-separator="至"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="anchorName" label="主播昵称">
          <el-input
            v-model="basicInfo.anchorName"
            placeholder="填写本次直播的昵称"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="anchorWechat" label="直播微信账号">
          <el-select
            v-model="basicInfo.anchorWechat"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in memberList"
              :key="item.username"
              :label="item.nickname"
              :value="item.username"
            >
              <span style="float: left">{{ item.nickname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.username
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="官方收录">
          <el-radio v-model="basicInfo.isFeedsPublic" :label="1">开启</el-radio>
          <el-radio v-model="basicInfo.isFeedsPublic" :label="0">关闭</el-radio>
        </el-form-item>
        <div class="next-step-wrap">
          <el-button type="primary" @click="submitForm">下一步</el-button>
        </div>
      </el-form>
      <el-form v-if="step == 2">
        <el-form-item class="card-title">分享卡片样式配置</el-form-item>
        <el-row class="cardFlex">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 14px">
              <div class="bottom clearfix">
                <time style="color: #999">小程序</time>
              </div>
            </div>
          </el-card>
          <div class="cardFlex-div">
            <div class="cardFlex-top">分享卡片封面</div>
            <div>用户在微信对话框内分享的直播间将以分享卡片的形式呈现。</div>
            <div>建议尺寸：800像素 * 640像素，图片大小不得超过1M。</div>
            <!-- 引入组件。 -->
            <el-upload
              action="http://8.134.120.26:8013/api/WxLive/UploadMultimedia/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-row>
        <el-form-item class="card-title">官方收录样式</el-form-item>
        <el-row class="cardFlex">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 14px">
              <div class="bottom clearfix">
                <time style="color: #999">小程序</time>
              </div>
            </div>
          </el-card>
          <div class="cardFlex-div">
            <div class="cardFlex-top">直播卡片封面</div>
            <div>图片建议大小为 800像素 * 800像素。</div>
            <div>图片大小不超过 300KB</div>
            <div>图片内容遵循平台规范后更容易被推荐。</div>
            <div>了解官方收录</div>
            <!-- 引入组件。 -->
            <el-upload
              action="http://localhost:32223/api/WxLive/UploadMultimedia/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-row>
        <el-form-item class="card-title">直播间样式配置</el-form-item>
        <el-row class="cardFlex">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 14px">
              <div style="color: #999">小程序</div>
            </div>
          </el-card>
          <div class="cardFlex-div">
            <div class="cardFlex-top">直播间背景墙</div>
            <div>直播间背景墙是每个直播间的默认背景。</div>
            <div>建议尺寸：800像素 * 640像素，图片大小不得超过1M。</div>
            <!-- 引入组件。 -->
            <el-upload
              action="http://localhost:32223/api/WxLive/UploadMultimedia/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-form-item label="直播间功能" prop="type">
              <span>以下四个功能无法在开播后设置开启或关闭</span>
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="评论" name="type"></el-checkbox>
                <el-checkbox label="商品货架" name="type"></el-checkbox>
                <el-checkbox label="分享" name="type"></el-checkbox>
                <el-checkbox label="点赞" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="拓展功能" prop="extend">
              <el-checkbox-group v-model="ruleForm.extend">
                <el-checkbox label="回放" name="extend"></el-checkbox>
                <el-checkbox label="客服" name="extend"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-row>

        <div class="bottom-btn">
          <el-button>上一步</el-button>
          <el-button @click="establish" type="primary">创建</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { MainHeader } from '@/components/main-header/index'
import { getRoleList, RoomCreate } from '@/service/main/main'
export default defineComponent({
  components: { MainHeader },
  async setup() {
    const formEle = ref()
    onMounted(() => {
      // console.log(formEle, 'formEle')
      return formEle
    })

    let step = ref(1)
    // 表单验证通过才能下一步
    const submitForm = () => {
      step.value = 2
      // console.log(formEle.value.validate)
      // formEle.value.validate((valid: any) => {
      //   if (valid) {
      //     step.value = 2
      //   } else {
      //     return false
      //   }
      // })
    }
    const basicInfo = reactive({
      type: 0,
      isFeedsPublic: 1,
    })

    // 获取用户选择数据
    let memberList = ref(null)
    let getRoleListRes = getRoleList('', -1, 0, 30)
    memberList = (await getRoleListRes).list

    // const rules = {
    //   name: [
    //     { required: true, message: '请输入直播间标题', trigger: 'blur' },
    //     { validator: validName, trigger: 'change' },
    //   ],
    //   time: [{ required: true, message: '请选择直播时间', trigger: 'blur' }],
    //   anchorName: [
    //     { required: true, message: '请输入主播昵称', trigger: 'blur' },
    //     { validator: validWcName, trigger: 'blur' },
    //   ],
    //   anchorWechat: [
    //     { required: true, message: '请选择直播微信账号', trigger: 'blur' },
    //   ],
    // }
    // const handleExceed(files, fileList) {
    //     this.$message.warning(
    //       `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
    //         files.length + fileList.length
    //       } 个文件`
    //     )
    //   }
    const ruleForm = reactive({
      type: [] as any[],
      extend: [] as any[],
    })
    const pickerOptions = {
      disabledDate: (date: any) => {
        return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
      },
    }
    const imageUrl = ref('')
    const fileList = ref(null)
    const handlePictureCardPreview = (file: any) => {
      console.log(file)
    }
    // 创建直播间
    const establish = () => {
      let create = {
        name: '测试直播房间12',
        coverImg:
          's7-pf7qCloXqUdui3ON7op9f3-_RbSUuSu3PTyXHEuDmKhjajJzt4cpnLOy7eQtY',
        startTime: 1634021499,
        endTime: 1634035899,
        anchorName: 'ygces',
        anchorWechat: 'wxid_p6rluxm46bxo22',
        subAnchorWechat: '',
        createrWechat: '',
        shareImg:
          's7-pf7qCloXqUdui3ON7op9f3-_RbSUuSu3PTyXHEuDmKhjajJzt4cpnLOy7eQtY',
        feedsImg:
          's7-pf7qCloXqUdui3ON7op9f3-_RbSUuSu3PTyXHEuDmKhjajJzt4cpnLOy7eQtY',
        isFeedsPublic: 1,
        type: 0,
        closeLike: 0,
        closeGoods: 0,
        closeComment: 0,
        closeReplay: 0,
        closeShare: 0,
        closeKf: 0,
      }
      RoomCreate(create)
    }
    return {
      step,
      basicInfo,
      pickerOptions,
      imageUrl,
      fileList,
      memberList,
      getRoleListRes,
      submitForm,
      handlePictureCardPreview,
      formEle,
      ruleForm,
      establish,
    }
  },
})
</script>

<style scoped lang="less">
.live-create-room {
  text-align: left;
  .el-steps {
    justify-content: center;
    padding-bottom: 20px;
  }

  .next-step-wrap {
    display: flex;
    // justify-content: center;
  }
  .card-title {
    font-size: 0.2rem;
    text-align: center;
    font-weight: bold;
  }
  .cardFlex {
    display: flex;
    justify-content: center;
    &-div {
      width: 450px;
      font-size: 0.2rem;
      color: #737373;
      padding: 0 1rem;
      .cardFlex-top {
        color: #1a1a1a;
        font-weight: bold;
        padding-bottom: 0.2rem;
      }
    }
  }
  .bottom-btn {
    text-align: center;
  }
}
</style>
